<template>
	<view class="container">
		<scroll-view class="tab flex-between" scroll-with-animation scroll-x :scroll-left="scrollLeft">
			<view class="li tc" v-for="(item, index) in tab" :key="index" :class="[curTab === index ? 'li-c' : '']" @click="switchTab(index)">
				{{item}}
			</view>
		</scroll-view>
		<view class="filter flex-between">
			<view class="flex-between" @click="toPath('taobaoId')">
				<view class="text-over pid">{{filterObj.taobaoId.label}}</view>
				<text class="iconfont">&#xe618;</text>
			</view>
			<Filter ref="filter2" @open="timeShow = true" @close="close" @filter="filter" type="time" :show="timeShow"></Filter>
			<Filter ref="filter3" @open="cusOrderShow = true" @close="close" @filter="filter" type="cusOrder" :show="cusOrderShow"></Filter>
			<Filter ref="filter4" v-if="curTab === 5" @open="tagShow = true" @close="close" @filter="filter" type="tag" :show="tagShow"></Filter>
			<!-- 推广位 -->
			<view class="flex-between" @click="toPath('positionId')" v-if="curTab === 0 || curTab === 1">
				<view class="text-over pid">{{filterObj.positionId.label}}</view>
				<text class="iconfont">&#xe618;</text>
			</view>
			<!-- 运营人 -->
			<view class="flex-between" @click="toPath('staffId')" v-if="curTab === 4">
				<view class="text-over pid">{{filterObj.staffId.label}}</view>
				<text class="iconfont">&#xe618;</text>
			</view>
			<Filter ref="filter5" @open="dateShow = true" @close="close" @filter="filter" type="date" :show="dateShow"></Filter>
		</view>
		<!-- 排序 -->
		<view class="sort flex-between">
			<view class="title">{{title}}</view>
			<view class="sort-li flex-between">
				<template v-if="params.filterInVaildOrder === ''">
					<view class="li flex-center" @click="srot('totleCommission')">
						全部佣金
						<image v-if="params.order === 'totleCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'totleCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('orderNum')">
						全部订单
						<image v-if="params.order === 'orderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'orderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
				<template v-if="params.filterInVaildOrder === 1">
					<view class="li flex-center" @click="srot('validCommission')">
						有效佣金
						<image v-if="params.order === 'validCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'validCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('validOrderNum')">
						有效订单
						<image v-if="params.order === 'validOrderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'validOrderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
				<template v-if="params.filterInVaildOrder === 0">
					<view class="li flex-center" @click="srot('invalidCommission')">
						无效佣金
						<image v-if="params.order === 'invalidCommission' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'invalidCommission' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
					<view class="li flex-center" @click="srot('invalidOrderNum')">
						无效订单
						<image v-if="params.order === 'invalidOrderNum' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'invalidOrderNum' && params.sort ==='asc' ? 'drop-c' : '']"></image>
						<image src="../../static/common/no-drop.png" v-else></image>
					</view>
				</template>
				<view class="li flex-center" v-if="curTab !== 0 && curTab !== 5 " @click="srot('alipayTotalPrice')">
					成交额
					<image v-if="params.order === 'alipayTotalPrice' && params.sort" src="../../static/common/drop.png" :class="[params.order === 'alipayTotalPrice' && params.sort ==='asc' ? 'drop-c' : '']"></image>
					<image src="../../static/common/no-drop.png" v-else></image>
				</view>
			</view>
		</view>
		<view class="list">
			<template>
				<view class="item flex-between" v-for="(item, index) in prodData.list" :key="index" @click="toPath( 'detail', item, index)">
					<view class="left flex-center" v-if="curTab === 0">
						<image :src="item.itemImg"></image>
						<view class="title text-over2">{{item.itemTitle}}</view>
					</view>
					<view class="title" v-if="curTab === 1">{{item.sellerShopTitle}}</view>
					<view class="title" v-if="curTab === 2">{{item.adzoneName}}</view>
					<view class="title" v-if="curTab === 3">{{item.relationId}}</view>
					<view class="title" v-if="curTab === 4">{{item.staffName}}</view>
					<view class="title" v-if="curTab === 5">{{item.label}}</view>
					<view class="rig flex-start">
						<view class="li money">￥{{switchCommiss(item)}}</view>
						<view class="li">{{switchOrder(item)}}</view>
						<view class="li money" v-if="curTab !== 0 && curTab !== 5">￥{{item.alipayTotalPrice}}</view>
					</view>
				</view>
			</template>
			<!-- 加载文案 -->
			<LoadMore :loading="loading" :finished="finished" :empty="empty"></LoadMore>

			<!-- 回到顶部 -->
			<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
				<text class="iconfont">&#xe7ed;</text>
				<text class="text">置顶</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateFormat,
		formatDate,
		hesitateTime
	} from '../../utils'
	import Filter from '@/components/Filter.vue'
	import LoadMore from '@/components/LoadMore.vue'
	import {
		loading,
		loaded
	} from '@/utils/tip.js'
	export default {
		components: {
			Filter,
			LoadMore
		},
		data() {
			return {
				title: '',
				tab: ['产品统计', '店铺统计', '推广位统计', '渠道统计', '员工统计', '标签统计'],
				timeShow: false,
				cusOrderShow: false,
				dateShow: false,
				tagShow: false,
				curTab: 0,
				params: {
					page: 1,
					size: 10,
					order: '',
					sort: '',
					startTime: '',
					endTime: '',
					timeType: 0,
					taobaoId: '',
					positionId: '',
					staffId: '',
					tkStatus: '',
					labelType: 0,
					filterInVaildOrder: ''
				},
				// 获取到的数据
				prodData: {
					subData: {
						alipayTotalPrice: 0,
						orderNum: 0,
						validCommission: 0,
						validOrderNum: 0,
						payCommission: 0,
						payOrderNum: 0,
						settleCommission: 0,
						settleOrderNum: 0,
						invalidCommission: 0,
						invalidOrderNum: 0,
						totleCommission: 0,
					},
					list: [],
					pagination: null
				},
				loading: false,
				finished: false,
				empty: false,
				scrollLeft: 0,
				// 过滤类型
				filterType: '',
				filterObj: {
					positionId: {
						value: '',
						label: '推广位'
					},
					taobaoId: {
						value: '',
						label: '联盟账号'
					},
					staffId: {
						value: '',
						label: '运营人'
					}
				},
				isShowScrollTop: false
			};
		},
		onLoad(options) {
			options ? options : options = {}
			this.curTab = Number(options.curTab) || 0
			this.scrollLeft = (this.curTab - 1) * 60;
			this.getTime()
		},
		onShow() {
			this.clear()
			// if (this.curTab === 4) {		
			// 	this.staff = uni.getStorageSync('pid') || this.staff
			// 	this.params.staffId = this.staff.value
			// } else {
			// 	this.pid = uni.getStorageSync('pid') || this.pid
			// 	this.params.positionId = this.pid.value
			// }

			let data = uni.getStorageSync(this.filterType)

			if (!data) { // 按钮返回键什么都没选
				this.params[this.filterType] = this.params[this.filterType]
				this.filterObj[this.filterType] = this.filterObj[this.filterType]
			} else {
				this.params[this.filterType] = data.value
				this.filterObj[this.filterType] = data
			}

			this.getData()
		},
		onHide() {},
		onPageScroll(e) {
			if (e.scrollTop > 350) {
				this.isShowScrollTop = true;
			} else {
				this.isShowScrollTop = false;
			}
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			if (this.finished) return
			this.params.page++
			this.loading = true
			this.getData()
		},
		watch: {
			// curTab(newVal) {
			// 	this.clear()
			// 	this.getData()
			// }
		},
		methods: {
			formatDate,
			hesitateTime,
			switchTab(index) {
				this.curTab = index
				this.clearFilter()
				this.clear()
				this.getData()
			},
			// 切换全部订单/有效订单/无效订单数据
			switchOrder(item) {
				console.log('chufale')
				if (this.params.filterInVaildOrder === 1) {
					return item.validOrderNum
				} else if (this.params.filterInVaildOrder === 0) {
					return item.invalidOrderNum
				} else {
					return item.orderNum
				}
			},
			// 切换全部佣金/有效佣金/无效订单佣金
			switchCommiss(item) {
				if (this.params.filterInVaildOrder === 1) {
					return item.validCommission
				} else if (this.params.filterInVaildOrder === 0) {
					return item.invalidCommission
				} else {
					return item.totleCommission
				}
			},
			// 清出过滤条件
			clearFilter() {
				// this.$refs.filter1.change()
				this.$refs.filter2.change()
				this.$refs.filter3.change()
				this.$nextTick(() => {
					this.curTab === 5 ? this.$refs.filter4.change() : ''
				})
				this.$refs.filter5.change()
				this.params = {
						page: 1,
						size: 10,
						order: '',
						sort: '',
						startTime: '',
						endTime: '',
						timeType: 0,
						taobaoId: '',
						positionId: '',
						staffId: '',
						tkStatus: '',
						labelType: 0,
						filterInVaildOrder: ''
					},
					this.filterObj = {
						positionId: {
							value: '',
							label: '推广位'
						},
						taobaoId: {
							value: '',
							label: '联盟账号'
						},
						staffId: {
							value: '',
							label: '运营人'
						}
					},
					this.getTime()
			},
			getData() {
				let target = ''
				switch (this.curTab) {
					case 0:
						target = 'productStatistics'
						this.title = "产品信息"
						break;
					case 1:
						target = 'sellerShopStatistics'
						this.title = "店铺名称"
						break;
					case 2:
						target = 'positionStatistics'
						this.title = "推广位名称"
						break;
					case 3:
						target = 'relationStatistics'
						this.title = "渠道ID"
						break;
					case 4:
						target = 'staffStatistics'
						this.title = "员工名称"
						break;
					case 5:
						target = 'labelsStatistics'
						this.title = "标签名称"
						break;
				}
				loading()
				this.$service.order[target](this.params).then((res) => {
					loaded()
					this.prodData.list = this.prodData.list.concat(res.list)
					this.prodData.pagination = res.pagination
					this.prodData.subData = res.subData
					this.loadMore(res)
				}).catch((res) => {
					loaded()
				})
				uni.removeStorageSync('pid')
			},
			//列表加载的一些逻辑判断
			loadMore(res) {
				if (res.list.length < this.params.size) this.finished = true
				if (this.prodData.list.length === 0) this.empty = true
				this.loading = false
			},
			toPath(val, item, index) {
				if (val === 'detail') {
					item = encodeURIComponent(JSON.stringify(item))
					if (this.curTab === 0) {
						uni.navigateTo({
							url: `/pages/index/detail?info=${item}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/func/${val}?curTab=${this.curTab}&info=${item}&lastParam=${JSON.stringify(this.params)}`
						})
					}
				} else {
					this.filterType = val
					uni.navigateTo({
						url: `/pages/common/check?type=${val}&values=${this.params[val] || 'all'}`
					})
				}
			},
			getTime(val) {
				this.params = {
					...this.params,
					...dateFormat(val)
				}
			},
			// 清楚数据
			clear() {
				this.params.page = 1
				this.prodData.list = []
				this.loading = false
				this.finished = false
				this.empty = false
			},
			// 过滤
			filter(item, type) {
				switch (type) {
					case 'time':
						this.params.timeType = item.value
						this.timeShow = false
						break;
					case 'cusOrder':
						this.params.order = ''
						this.params.sort = ''
						this.params.filterInVaildOrder = item.value
						this.cusOrderShow = false
						break;
					case 'tag':
						this.params.labelType = item.value
						this.tagShow = false
						break;
					case 'date':
						this.getTime(item.value)
						this.dateShow = false
						break;
					case 'shade':
						this.timeShow = false
						this.cusOrderShow = false
						this.tagShow = false
						this.dateShow = false
						return
				}
				this.clear()
				this.getData()
			},
			srot(val) {
				if (this.params.order !== val) {
					this.params.sort = 'desc'
				} else {
					if (this.params.sort === 'desc') {
						this.params.sort = 'asc'
					} else if (this.params.sort === '') {
						this.params.sort = 'desc'
					} else {
						this.params.sort = ''
					}
				}

				this.params.order = val
				this.clear()
				this.getData()
			},
			// 回到顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.tab {
			box-sizing: border-box;
			white-space: nowrap;
			border-bottom: 2rpx solid #F2F2F2;
			background-color: white;

			// overflow: auto;
			.uni-scroll-view::-webkit-scrollbar {
				display: none;
			}

			&>view {
				width: 23%;
				flex-shrink: 0;
				position: relative;
				font-size: 28rpx;
			}

			.li {
				display: inline-block;
				padding: 20rpx 20rpx;
			}

			.li-c {
				color: $main-color;
				border-bottom: 4rpx solid $main-color;

				&::after {
					content: '';
					width: 30%;
					height: 4rpx;
					border-radius: 2rpx;
					background-color: $main-color;
					display: block;
					margin: 0 auto;
					position: absolute;
					left: 0;
					right: 0;
					bottom: -13rpx;
				}
			}
		}

		.filter {
			padding: 24rpx 42rpx;
			background-color: white;

			.icon {
				width: 24rpx;
				height: 24rpx;
				transition: all 0.5s;
			}

			.pid {
				max-width: 3.8rem;
			}
		}

		.sort {
			padding: 20rpx 24rpx;

			view {
				color: #999999;
			}

			.sort-li {
				.li {
					min-width: 7em;
					font-size: 24rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						transition: all 1s;
					}

					.drop-c {
						transform: rotate(180deg);
					}
				}
			}
		}

		.list {
			padding: 0 24rpx;

			.item {
				margin-bottom: 24rpx;
				width: 702rpx;
				min-height: 112rpx;
				background-color: white;
				border-radius: 4rpx;
				padding-left: 28rpx;
				font-weight: bold;
			}

			.prod-item {
				height: 112rpx;
			}

			.rig {
				view {
					// margin-right: 76rpx;
					min-width: 6em;
					text-align: center;
				}

				.money {
					color: $main-color;
				}
			}

			.left {
				.title {
					max-width: 13em;
				}

				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>
